<template>
  <div class="register">
    <el-row :gutter="20">
  <el-col :span="9" :offset="7">
     <span class="title">注册页面</span>
    <div class="grid-content bg-purple">
    <br>
    <br>
    <br>
     <span>手机号:</span><el-input v-model="user" placeholder="请输入手机号"></el-input>
    <br>
    <br>
    <span>密码:</span> <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
    <br>
    <br>
      <div class="but">
      <el-button type="danger" round @click="to_login">去登录</el-button>
      <el-button type="success" round @click="to_reg">注册</el-button>
</div>
  </div></el-col>
</el-row>

  </div>

</template>

<script>
    export default {
        name: "register",
      data() {
          return{
            user : '',
            pwd : '',
          }
      },
      methods: {
          to_reg() {
            this.$axios({
                    url: 'http://127.0.0.1:8000/register/',
                    method: 'post',
                    data: {
                        mobile: this.user,
                        password: this.pwd,
                    }
                }).then(response => {
                  if (response.status === 200) {
                        this.$message({
                            message: '注册成功',
                            type: 'success',
                            duration: 1000,
                        });
                    }
            }).catch((error) =>{
              this.$message({
                        message: '请输入正确的手机号或已注册',
                        type: 'warning',
                        duration: 1000,
                    });
            })
          },
          to_login() {
            this.$router.push('/login')
          }
      }
    }
</script>

<style scoped>
 .register{
   margin-top: 50px;

 }
  input {
    width: 200px;
    display: block;
  }

  .title{
    font-size: 30px;
   margin-left: 200px;
  }

  .but{
    float: right;
  }
</style>
